<template>
	<gui-page>
		<template v-slot:gBody>
			<view class="page">
				<view class="gui-bg-white gui-dark-bg-level-3">
					<!-- 文章标题 -->
					<view style="" class="content"><!--  -->
						<view class="gui-padding">
							<text class="gui-h4 gui-bold">{{info.activity_name}}</text>
							<view
								class="gui-flex gui-color-gray gui-align-items-center gui-padding-small gui-space-between gui-text-small"
								style="margin: 20rpx 0;">
								<view class="" style="width: 200rpx;" v-if="info.category">
									<text class="gui-icons">&#xe797;</text>{{info.category.name}}
								</view>
								<view class="gui-text gui-text-small" style="margin-top: 10rpx;">
									<text v-if="info.act_type==3">
										{{info.enter_num}}人已报名
									</text>
									<text v-else class="gui-icons"
										style="margin-right:10rpx;">&#xe6fe;</text>{{info.views}}人浏览
								</view>
							</view>
							<view class="gui-bg-white gui-flex gui-space-between gui-align-items-center gui-text-small"
								style="height: 70rpx;">
								<text class="gui-margin-x" style="font-size: 26rpx;">
									{{$comm.toDate(info.start_time)}} ~ {{$comm.toDate(info.end_time)}}
								</text>
								<text class="gui-margin-x gui-color-gray"
									:class="info.is_start==0?'gui-color-red':''">{{getStatus(info.is_start)}}</text>

							</view>
						</view>
						<!-- 文章内容 -->
						<view style="width: 98%;">
							<view class=" gui-dark-bg-level-3 gui-padding">
								<rich-text :nodes="active" style="font-size: 30rpx;line-height: 60rpx;"></rich-text>
							</view>
						</view>
					</view>
					<!-- <view class="gui-flex gui-bg-white gui-align-items-center button-box" style="" v-if="info.category.ame !== '新闻类' && info.category.name !== '专项活动' && info.is_start == 2 ">
						<button class="gui-color-white b-bottom" style="" v-if="info.category.name=='猜灯谜'" @click="gotoRank(info)">排行榜</button>
						<button class="gui-color-white b-bottom" style="" v-if="info.category.name==='视频类'||info.category.name==='摄影类'||info.category.name == '征文类'" @click="lookexcellent(info)">查看优秀作品</button>
						<button class="gui-color-white b-bottom" style="" @click="setStatus">活动反馈</button>
					</view>
					<view class="gui-flex gui-bg-white gui-align-items-center button-box" style="" v-if="info.category.name !== '新闻类' && info.category.name !== '专项活动' && info.is_start == 0 || info.is_start==1">
						
						<button class="gui-color-white b-bottom" style="" v-if="info.category.name=='视频类'||info.category.name == '摄影类'||info.category.name == '征文类'" @click="lookActive(info)">查看优秀作品</button>
						<button class="gui-color-white b-bottom" style="" v-if="info.category.name !== '新闻类'||info.category.name!=='专项活动'" @click="Join(info)">我要参加</button>
						
					</view> -->


				</view>

				<!-- <view>
					{{info.act_type}}
				</view> -->
				
			<!-- 	<view class="participations" v-if="info.act_type == 4 || info.act_type == 6 || info.act_type == 7 ">
					<button @click="goExcellent">查看优秀作品</button>
					<button :disabled="info.is_start != 0" v-if="info.is_start != 2"
						@click="goStudy">我要参加</button><button v-if="info.is_start == 2"
						:disabled="info.isFeedback == ''" @click="goStudys()">活动反馈</button>
				</view>
				<view class="participation" v-if="info.act_type == 2 || info.act_type == 5">
					<button v-if="info.is_start != 2" :disabled="info.is_start != 0" @click="goStudy">我要参加</button>
					<button v-if="info.is_start == 2" :disabled="info.isFeedback == ''"
						@click="goStudys()">活动反馈</button>
				</view>
				<view class="participation" v-if="info.act_type == 3">
					
					<button v-if="info.is_start != 2" :disabled="getDisabled()"
						@click="goSign">{{ getDisabled() ? "已报名" : "我要报名" }}</button>
					<button v-if="info.is_start == 2" :disabled="info.isFeedback == ''"
						@click="goStudys()">活动反馈</button>
				</view>
				<view class="participation" v-if="info.act_type == 8">
					<button v-if="info.is_start != 2" @click="goDraw">我要参加</button>
					<button v-if="info.is_start == 2" :disabled="info.isFeedback == ''"
						@click="goStudys()">活动反馈</button>
				</view>
				<view class="participations" v-if="info.act_type == 9">
					<button @click="goRank">排行榜</button>
					<button v-if="info.is_start != 2" @click="goGuess">立即参加</button>
					<button v-if="info.is_start == 2" :disabled="info.isFeedback == ''"
						@click="goStudys()">活动反馈</button>
				</view> -->
			</view>
		</template>
	</gui-page>
</template>
<script>
	import parserHtml from "@/Grace6/js/parserHTML.js";

	export default {
		data() {
			return {
				baseimg: 'https://app.lgwisdomunion',
				active: [],
				mid: 0,
				info: {
					activityName: '',
					views: 0,
					categoryName: '',
					startTime: '',
					endTime: '',
					is_start: '',
				}
			}
		},
		onLoad: function(opt) {
			let self = this;
			console.log("opt", opt);
			self.mid = opt.id
			console.log(self.mid)
			this.newsInfo();
			this.view()
		},
		methods: {
			goStudy() {
				if (
					this.info.act_type == 4 ||
					this.info.act_type == 6 ||
					this.info.act_type == 7
				) {
					// this.$router.push({
					//   path: "/activityUploadArticles",
					//   name: "activity-uploadArticles",
					//   query: { id: this.id, actType: this.info.act_type },
					// });
					uni.navigateTo({
						url: "/pages/home/Active/activeDetail/join?id=" + this.mid + "&act_type=" + this.info
							.cat_type
					})
				} else if (this.info.act_type == 2) {
					if (this.info.activity_name === "职工迎新线上跑活动") {
						// this.$router.push({
						//   path: "/online/BackupIndex",
						//   name: "BackupIndex",
						//   query: { id: this.id, actType: this.info.act_type },
						// });
					} else {
						// this.$router.push({
						//   path: "/online/index",
						//   name: "onlineIndex",
						//   query: { id: this.id, actType: this.info.act_type },
						// });

					}
				} else if (this.info.act_type == 5) {
					this.ifTakePartIsOk();
					// console.log(789)
					// this.$router.push({ path: "/survey" , name: 'survey',query: {id:this.activityInfo.relationId,actId:this.id,actType:this.activityInfo.actType}});
				}
			},
			ifTakePartIsOk() {

				//   this.$axios
				//     .get(URL.survey.detail, {
				//       params: { id: this.activityInfo.relationId },
				//     })
				//     .then((res) => {
				//       if (res.code && res.code == 1) {
				//         this.$router.push({
				//           path: "/survey",
				//           name: "survey",
				//           query: {
				//             id: this.activityInfo.relationId,
				//             actId: this.id,
				//             actType: this.activityInfo.actType,
				//           },
				//         });
				//       } else {
				//         this.$dialog.toast({
				//           mes: res.msg || "获取问卷信息失败",
				//           icon: "error",
				//           timeout: 1000,
				//           callback: () => {},
				//         });
				//       }
				//     })
				//     .catch((error) => {
				//       this.$dialog.toast({
				//         mes: res.msg || "获取问卷信息失败",
				//         icon: "success",
				//         timeout: 1000,
				//       });
				//     });
			},
			goStudys() {
				// 活动反馈
				//检测是否有反馈值
				this.$boya.NGet("/app/activity/activity_feedback", {
					activityId: this.mid
				}, function(res) {
					console.log("goStudys->res", res);
				});
				// this.$axios
				//   .get(URL.online.activityFeedback, {
				//     params: {
				//       activityId: this.id,
				//     },
				//   })
				//   .then((res) => {
				//     if (res.code == 1 && res.data) {
				//       this.$router.push({
				//         path: "/feedbacks",
				//         name: "feedbacks",
				//         query: { id: this.id },
				//       });
				//     } else {
				//       this.$dialog.toast({
				//         mes: "活动暂无反馈数据",
				//         icon: "success",
				//         timeout: 1000,
				//       });
				//     }
				//   })
				//   .catch((error) => {});
			},
			goSign() {

			},
			getDisabled() {
				console.log("getDisabled", this.info.if_join);
				if (this.info.if_join == 0) {
					return false;
				} else {
					if (this.info.verify_state == 2) {
						return false;
					}
				}
				return true;
			},
			view() {
				this.$boya.NPost("/app/activity/views", {
					id: this.mid
				}, function(res) {
					// console.log(res)
				})
			},
			newsInfo() {
				let self = this;
				this.$boya.NGet("/app/activity/get", {
					id: self.mid
				}, function(res) {

					if (res.categoryName === "活动专享") {
						self.info = JSON.parse(res.data)
						// console.log("info",self.info)
					}
					// console.log("newsInfo",res);
					self.info = res.data;
					console.log("info", self.info)
					console.log("activity_info", self.info.activity_info)
					self.active = parserHtml.parserHTML(res.data.activity_info);
					console.log("article", self.active);
					for (let i in self.active) {
						let m = self.active[i].children
						console.log("m", m)
						for (let key in m) {
							if (m.type == "img") {
								let d = m[key].attrs
								// console.log("d",d)
								let imgPath = self.baseimg + d.src
								// console.log("imgPath",imgPath)
								self.active[i].children[key].attrs.src = imgPath
							}
						}
					}
				})
			},
			getStatus(d) {
				switch (d) {
					case -1:
						return "全部";
					case 1:
						return "未开始";
					case 0:
						return "进行中";
					case 2:
						return "已结束";
				}
			},
			Join(c) {
				console.log("jion", c)
				console.log("jion", c)
				if (c.categoryName === "报名类") {
					this.$lg.Post("/app/activityOnlineEnter/insert", {
						actId: c.id
					}, (res) => {
						console.log("报名类", res)
					})
					uni.showToast({
						title: "操作失败，请联系管理员",
						icon: "none"
					})

				} else {
					if (c.categoryName === "学习竞赛类") {
						this.$comm.nav_to("#/pages/home/Active/online/online?id=" + c.id + "&act_type=" + c.act_type)
					} else {
						this.$comm.nav_to("#/pages/home/Active/activeDetail/join?id=" + c.id + "&act_type=" + c.act_type)
					}
				}
			},
			lookexcellent(d) {
				let data = {
					actId: d.id,
					act_type: d.act_type,
					ifGood: d.ifGood
				}
				// this.$comm.nav_to("https://app.lgwisdomunion/#/excellent",data)
				// this.$comm.nav_to("#/pages/home/Active/activeDetail/excellent",data)
				uni.navigateTo({
					url: "/pages/home/Active/activeDetail/excellent?id=" + d.id + "&act_type=" + d.act_type +
						"&ifGood=" + d.ifGood,
				})
				console.log(d)
			},
			setStatus() {
				uni.showToast({
					title: "暂无反馈数据",
					icon: "error"
				})
			},
			gotoRank(c) {
				uni.navigateTo({
					url: "/pages/home/Active/activeDetail/rank?id=" + c.id
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	/* *{
		margin: 0 auto;
	} */

	.content {
		width: 100vw;
		height: 100vh;
		/* background-color: rgb(242,217,248); */
		background: linear-gradient(70deg, rgb(227, 218, 251), rgb(242, 212, 241));
		position: fixed;
		padding-bottom: 80rpx;
	}

	/* .page {
		background: linear-gradient(70deg, rgb(227, 218, 251), rgb(242, 212, 241));
		position: relative;
	} */

	.button-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 100rpx;
	}

	.b-bottom {
		background: linear-gradient(to right, rgb(244, 104, 57), rgb(251, 88, 98));
		width: 300rpx;
		height: 80rpx;
	}

	.rich-text img {
		width: 200rpx;
	}

	.participation {
		position: fixed;
		bottom: 0rpx;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
		background: #ffffff;
		width: 100vw;
		left: 0;
		right: 0;
		text-align: center;

		button {
			background: linear-gradient(to left, #fc5666, #f36c30);
			background: -ms-linear-gradient(to left, #fc5666, #f36c30);
			background: -webkit-linear-gradient(to left, #fc5666, #f36c30);
			background: -moz-linear-gradient(to left, #fc5666, #f36c30);
			width: 660rpx;
			height: 80rpx;
			border-radius: 80rpx;
			display: inline-block;
			font-size: 30rpx;
			line-height: 80rpx;
			color: #fff;
			border: none;
		}
	}


	.participations {
		position: fixed;
		bottom: 0rpx;
		padding: 20rpx 0;
		background: #ffffff;
		width: 100%;
		text-align: center;
		display: flex;

		button {
			background: linear-gradient(to left, #fc5666, #f36c30);
			background: -ms-linear-gradient(to left, #fc5666, #f36c30);
			background: -webkit-linear-gradient(to left, #fc5666, #f36c30);
			background: -moz-linear-gradient(to left, #fc5666, #f36c30);
			width: 40%;
			height: 80rpx;
			border-radius: 80rpx;
			display: inline-block;
			font-size: 30rpx;
			line-height: rem(80);
			color: #fff;
			border: none;
		}

	}
</style>